<template>
    <view class="page over-auto-y column">
        <!-- 头部 -->
        <hj-navbar title="房型列表" />
        <view class="column flex-auto w100 over-hide">
            <!-- 条件筛选 -->
            <Sift @openDate="openDate" @openInfo="showCheckInInfo = true" />

            <!-- 内容区 -->
            <view class="main flex-auto w100 over-hide">
                <scroll-view
                    :scroll-y="true"
                    class="big"
                    :refresher-enabled="true"
                    :refresher-triggered="triggered"
                    @refresherrefresh="onRefresh"
                >
                    <view class="pr-30 pl-30">
                        <hj-loading :show="isInitLoad" v-if="isInitLoad" />
                        <hj-no-data
                            v-else-if="!roomList.length"
                            defaultImg="no-data-01.png"
                            tipsText="没有找到您想要的房型哦~"
                            :styleObj="{ 'padding-top': '160rpx', color: '#ffffff' }"
                        />
                        <RoomList v-else :list="roomList" />
                        <hj-safe-footer />
                    </view>
                </scroll-view>
                <!-- 日历弹窗 -->
                <up-calendar-hj
                    :show="show"
                    :defaultDate="defaultDate"
                    :monthNum="hotelInfo.calendarMonth"
                    @close="show = false"
                    @confirm="confirmDate"
                ></up-calendar-hj>
                <!-- 数量选择弹窗 -->
                <hj-checkIn-info
                    :show="showCheckInInfo"
                    @close="showCheckInInfo = false"
                    @confirm="confirmInfo"
                />
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 查询的房型列表
 * @author yinzhi
 * @date 2025-05
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent, computed } from 'vue'
import { logger } from '@/utils/log.js'
import Sift from './components/Sift.vue'
import RoomList from './components/RoomList.vue'
import { getRoomListApi } from '@/libs/api/roomApi.js'
// 引入组件
defineComponent({
    components: {
        Sift,
        RoomList
    }
})
import { useStore } from 'vuex'
const store = useStore()

// 初始化获取一下房型列表
onLoad(async e => {
    getRoomList() //初始化的时候调用一次即可，节省接口请求
})
// 是否初始化加载
const isInitLoad = ref(true)
// 房型列表
const roomList = ref([])
// 下拉刷新控制参数
const triggered = ref(false)
const _freshing = ref(false)
// 日历弹窗
const show = ref(false)
// 数量选择弹窗
const showCheckInInfo = ref(false)
// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')
// 默认时间区间
const defaultDate = computed(() => {
    return [checkInInfo.value.startDate, checkInInfo.value.endDate]
})
// 酒店信息
const hotelInfo = computed(() => store.state.platform.hotelInfo || '')

// 人数信息变化确认
const confirmInfo = () => {
    isInitLoad.value = true
    getRoomList()
}

// 打开日期选择弹窗
const openDate = async () => {
    try {
        await store.dispatch('platform/initHotelInfo')
        show.value = true
    } catch (error) {
        show.value = true
        logger.error('[getRecomList] 首页获取酒店信息失败: ', error)
    }
}

// 获取房型列表
const getRoomList = async () => {
    try {
        const data = await getRoomListApi({
            checkInDate: checkInInfo.value.startDate || '',
            checkOutDate: checkInInfo.value.endDate || '',
            roomNum: checkInInfo.value.roomAmount,
            adultNum: checkInInfo.value.adult,
            childNum: checkInInfo.value.confirmhildren,
            hotelId: hotelInfo.value?.id || ''
        })
        roomList.value = data || []
        // 关闭加载动画
        let time = setTimeout(() => {
            isInitLoad.value = false
            clearTimeout(time)
        }, 400)
    } catch (error) {
        isInitLoad.value = false
        logger.error('[getRoomList] 获取房型列表失败: ', error)
    }
}

// 日历确认
const confirmDate = async e => {
    show.value = false
    await store.commit('platform/setCheckInInfo', {
        ...checkInInfo.value,
        startDate: e.date[0],
        endDate: e.date[e.date.length - 1],
        nightsCount: e.nightsCount
    })
    isInitLoad.value = true
    await getRoomList()
}

// 下拉刷新
const onRefresh = async () => {
    // 防止多次刷新
    if (_freshing.value) return
    _freshing.value = true
    triggered.value = true
    let time = setTimeout(() => {
        getRefresh()
        clearTimeout(time)
    }, 600)
}
// 刷新事件 等所有接口请求 完成后使刷新动画回弹
const getRefresh = () => {
    Promise.all([getRoomList()])
        .then(() => {
            triggered.value = false
            _freshing.value = false
        })
        .catch(() => {
            triggered.value = false
            _freshing.value = false
        })
}
</script>

<style scoped lang="scss">
.page {
    background: #fff;
    .main {
        background-color: #e0e1de; /* 兜底纯色（取渐变终点色）c8d3da */
        background-image: -webkit-linear-gradient(top, #ffd595, #e0e1de);
        background-image: linear-gradient(to bottom, #ffd595, #e0e1de);
        background-repeat: no-repeat;
        background-size: 100% 100%; /* 确保渐变铺满容器 */
    }
}
</style>
